{% extends "admin/admin_base.html" %}


{% block content %}
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/mdui@1.0.1/dist/css/mdui.min.css"
  integrity="sha384-cLRrMq39HOZdvE0j6yBojO4+1PrHfB7a9l5qLcmRm/fiWXYY+CndJPmyu5FV/9Tw"
  crossorigin="anonymous"
/>
<div class="box box-success">
    <div class="box-header with-border">
        <i class="fa fa-book"></i>
        <h3 class="box-title">更新机器人配置</h3>
    </div>
    <div class="box-body">
        <!-- 数据表格 -->
        <!-- <div class="table-box"> -->
            <div class="mdui-table-fluid">
            <!--数据列表-->
            <table id="dataList" class="table table-bordered table-striped table-hover dataTable">
                <thead>
                <tr>
                    <th class="">id</th>
                    <th class="">名称</th>
                    <th class="text-center mdui-table-col-numeric">操作</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>1</td>
                    <td>上传地图列表</td>
                      <td class="text-center mdui-table-col-numeric">
                          <form action="{{url_for('admin.upload_map_list')}}" method="POST" enctype="multipart/form-data">

                            <div class="mdui-btn mdui-btn-raised mdui-ripple mdui-color-green mdui-text-color-white" style="width: 104.81px;">
                                <span id="upload_map_list">选择文件</span>
                                <input style="position:absolute;
                                top:0;
                                right:0;
                                margin:0;
                                border:solid transparent;
                                opacity:0;
                                filter:alpha(opacity=0);
                                cursor: pointer;" type="file" multiple="" name="file" accept=".pgm,.png,.yaml,.json" onchange="upload_map_list(this.files)"/>
                            </div>
                            <button style="width: 104.81px;
                            margin-left: 20px;" class="mdui-btn mdui-btn-raised mdui-ripple mdui-color-green mdui-text-color-white">上传</button>

                             <!-- <div class="btn bg-olive btn-xs" style='width:auto'>
                         <input type="file" multiple="" name="file" accept=".pgm,.png,.yaml,.json"/>
                            </div>
                        <input type="submit"  class="btn bg-olive btn-xs"value="上传"/> -->
                    </form>
                    </td>
                    </td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>上传音乐列表</td>
                      <td class="text-center mdui-table-col-numeric">
                          <form action="{{url_for('admin.upload_music_list')}}" method="POST" enctype="multipart/form-data">
                             <!-- <div class="btn bg-olive btn-xs" style='width:auto'>
                           <input type="file" multiple="" name="file" accept=".mp3,.wav"/>
                            </div>
                        <input type="submit"  class="btn bg-olive btn-xs"value="上传"/> -->

                        <div class="mdui-btn mdui-btn-raised mdui-ripple mdui-color-green mdui-text-color-white" style="width: 104.81px;">
                            <span id="upload_music_list" style="width: 104.81px;">选择文件</span>
                            <input style="position:absolute;
                            top:0;
                            right:0;
                            margin:0;
                            border:solid transparent;
                            opacity:0;
                            filter:alpha(opacity=0);
                            cursor: pointer;" type="file" multiple="" name="file" accept=".mp3,.wav" onchange="upload_music_list(this.files)"/>
                        </div>
                        <button style="width: 104.81px;margin-left: 20px;" class="mdui-btn mdui-btn-raised mdui-ripple mdui-color-green mdui-text-color-white">上传</button>    
                
                    </form>
                    </td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>恢复ros_config.yaml初始化</td>
                     <td class="text-center mdui-table-col-numeric">
                      <form action="{{url_for('admin.initialization_ros_config')}}" method="POST"
                         enctype="multipart/form-data">
                         <button style="width: 104.81px;
                         margin-left: 20px;
                         right: 128px;" class="mdui-btn mdui-btn-raised mdui-ripple mdui-color-green mdui-text-color-white">恢复初始化</button>
                        <!-- <input type="submit" class="btn bg-olive btn-xs" style="width: 290px;height: 30px" value="恢复初始化"/> -->
                        </form>
<!--                        <a class="btn bg-danger btn-xs"-->
<!--                           href="#">回复初始化-->
<!--                        </a>-->
                    </td>
                    </td>
                </tr>

                 <tr>
                    <td>4</td>
                    <td>下载ros_config.yaml</td>
                     <td class="text-center mdui-table-col-numeric">
                      <form action="{{url_for('admin.download_ros_config')}}" method="POST"
                         enctype="multipart/form-data">
                         <button style="width: 104.81px;
                         margin-left: 20px;
                         right: 128px;" class="mdui-btn mdui-btn-raised mdui-ripple mdui-color-green mdui-text-color-white">下载</button>
                        <!-- <input type="submit" class="btn bg-olive btn-xs" style="width: 290px;height: 30px" value="下载"/> -->
                        </form>
<!--                        <a class="btn bg-danger btn-xs"-->
<!--                           href="#">回复初始化-->
<!--                        </a>-->
                    </td>
                    </td>
                </tr>

                <tr>
                    <td>5</td>
                    <td>上传ros_config.yaml</td>
                            <td class="text-center mdui-table-col-numeric">
                          <form action="{{url_for('admin.upload_ros_config')}}" method="POST" enctype="multipart/form-data">
                             <!-- <div class="btn bg-olive btn-xs" style='width:auto'>
                            <input type="file" name="file" accept=".yaml"/>
                            </div>
                        <input type="submit"  class="btn bg-olive btn-xs"value="上传"/> -->

                        <div class="mdui-btn mdui-btn-raised mdui-ripple mdui-color-green mdui-text-color-white" style="width: 104.81px;">
                            <span id="upload_ros_config" style="width: 104.81px;">选择文件</span>
                            <input style="position:absolute;
                            top:0;
                            right:0;
                            margin:0;
                            border:solid transparent;
                            opacity:0;
                            filter:alpha(opacity=0);
                            cursor: pointer;" type="file" name="file" accept=".yaml" onchange="upload_ros_config(this.files)"/>
                        </div>
                        <button style="width: 104.81px;margin-left: 20px;" class="mdui-btn mdui-btn-raised mdui-ripple mdui-color-green mdui-text-color-white">上传</button>    
                

                    </form>
                    </td>

                    </td>
                </tr>

                 <tr>
                    <td>6</td>
                    <td>查看参数配置表</td>
                     <td class="text-center mdui-table-col-numeric">
                            <button style="width: 104.81px;
                            margin-left: 20px;
                            right: 128px;" class="mdui-btn mdui-btn-raised mdui-ripple mdui-color-green mdui-text-color-white"> <a href="{{url_for('admin.view_configure')}}" style="color: white">参数配置表</a></button>
                    </td>

                    </td>
                </tr>
                </tbody>
            </table>

        </div>
    </div>
</div>
<script
  src="https://cdn.jsdelivr.net/npm/mdui@1.0.1/dist/js/mdui.min.js"
  integrity="sha384-gCMZcshYKOGRX9r6wbDrvF+TcCCswSHFucUzUPwka+Gr+uHgjlYvkABr95TCOz3A"
  crossorigin="anonymous"
></script>
<script type="text/javascript">
    function upload_map_list(files) {
        console.log(files[0].name);
        document.getElementById("upload_map_list").innerHTML = files[0].name;
    }

    function upload_music_list(files) {
        console.log(files[0].name);
        document.getElementById("upload_music_list").innerHTML = files[0].name;
    }

    function upload_ros_config(files) {
        console.log(files[0].name);
        document.getElementById("upload_ros_config").innerHTML = files[0].name;
    }
</script>
{% endblock %}